<template>
  <div class="ImgSingleStyle">
    <div class="title">图片</div>
    <el-form :model="datas" label-width="120px" label-position="left">
      <div class="imgs">
        <div class="ml20 mr20">
          <el-form-item label="图片:">
            <UploadImg v-model:image-url="datas.list[0].image">
              <template #empty>
                <el-icon><Picture /></el-icon>
                <span>请上传图片</span>
              </template>
            </UploadImg>
          </el-form-item>
          <el-form-item label="链接类型:">
            <el-select v-model="datas.list[0].linkType" @change="handleChangeSel">
              <el-option v-for="item in swiperType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="datas.list[0].linkType === 1" label="菜品名字:">
            <el-input disabled v-model="datas.list[0].linkName" />
          </el-form-item>
          <el-form-item v-if="datas.list[0].linkType === 1" label="链接指向:">
            <el-input v-model="datas.list[0].linkValue" disabled>
              <template #append>
                <el-button :icon="Plus" @click="openSelectTreeTable('选择菜品')"></el-button>
              </template>
            </el-input>
          </el-form-item>
          <!-- <el-form-item label="链接指向:">
            <el-input v-if="datas.list[0].linkType === 1" v-model="datas.list[0].linkValue" />
            <el-input v-else v-model="datas.list[0].linkName" disabled>
              <template #append>
                <el-button :icon="Plus" @click="openSelectTreeTable('选择菜品')"></el-button>
              </template>
            </el-input>
          </el-form-item> -->
          <el-form-item label="开启边距:" prop="marginShow">
            <el-switch v-model="datas.list[0].marginShow" />
          </el-form-item>
          <el-form-item label="添加按钮:" prop="buttonShow">
            <el-switch v-model="datas.list[0].buttonShow" />
          </el-form-item>
          <section v-if="datas.list[0].buttonShow">
            <el-form-item label="按钮颜色:" prop="buttonColor">
              <el-color-picker v-model="datas.list[0].buttonColor" />
            </el-form-item>
            <el-form-item label="按钮文字:" prop="buttonText">
              <el-input v-model="datas.list[0].buttonText" />
            </el-form-item>
            <el-form-item label="文字颜色:" prop="textColor">
              <el-color-picker v-model="datas.list[0].textColor" />
            </el-form-item>
          </section>
        </div>
      </div>
    </el-form>
    <SelectTreeTable @radio="onRadio" ref="selectTreeTableRef" />
  </div>
</template>

<script lang="ts" setup name="ImgSingleStyle">
import { ref, toRefs } from "vue";
import { swiperType } from "@/utils/serviceDict";
import UploadImg from "@/components/Upload/Img.vue";
import { Plus } from "@element-plus/icons-vue";
import SelectTreeTable from "@/components/SelectTreeData/index.vue";
// import { getWaresList, getWaresCategoryList } from "@/api/modules/inventory";
import { getGoodsList, getFoodCategoryList } from "@/api/modules/goods";
const props = defineProps({
  datas: {
    type: Object
  }
});
const { datas } = toRefs(props);

const handleChangeSel = () => {
  datas.value.list[0].linkValue = "";
  datas.value.list[0].linkName = "";
};
const onRadio = (row: any) => {
  datas.value.list[0].linkValue = linkUrl.waresURL + row.data.id;
  datas.value.list[0].linkName = row.data.name;
};

const linkUrl = {
  waresURL: "/pages/product/product_detail?productId="
  // 链接指向数组
};

const selectTreeTableRef = ref<InstanceType<typeof SelectTreeTable> | null>(null);
const openSelectTreeTable = (title: string) => {
  const params = {
    title,
    isView: false,
    index: 0,
    selType: "radio",
    columns: [
      { type: "radio", label: "#", width: 60 },
      { prop: "name", label: "菜品名称", align: "left" }
    ],
    idName: "goodsCategoryId",
    // treeApi: getWaresCategoryList,
    // api: getWaresList
    treeApi: getFoodCategoryList,
    api: getGoodsList
  };
  selectTreeTableRef.value?.acceptParams(params);
};
</script>

<style scoped lang="scss">
.title {
  padding: 5px;
  margin-bottom: 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  border-left: 4px solid var(--el-color-primary);
}
</style>
